<template>
  <div class="uploadImg">
    <el-upload :action="action" :list-type="listType" :multiple="multiple" :on-preview="handleClickPic" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :limit="limitNumber">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'uploadImg',
    components: {
    },
    props: {
      action: {  //上传地址
        type: String,
        default: '/www.baidu.com'
      },
      listType: {  //文件列表的类型，text/picture/picture-card
        type: String,
        default: 'picture-card'
      },
      multiple: {  //是否上传多文件
        type: Boolean,
        default: true
      },
      limitNumber: {
        type: Number,
        default: 1
      },
      limitSize: {  //限制上传大小，默认0则不限制大小，单位M
        type: Number,
        default: 0
      }
    },
    data(){
      return {
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      beforeAvatarUpload(file){  //图片提交上传之前做筛选
        if(!this.limitSize){return true;}
        const flagSize = file.size / 1024 / 1024 < this.limitSize;
        if (!flagSize) {
          this.$message.error('上传图片大小不能超过 2MB');
        }
        return flagSize;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handleClickPic(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
.uploadImg{}
</style>